<template>
  <!-- 统计汇总 -->
  <a-collapse v-model="activeKey" :bordered="false" expand-icon-position="right" class="mb12">
    <a-collapse-panel style="background: #e6f3fc; border: none" :show-arrow="false">
      <template slot="header">
        <a-row type="flex" justify="space-between" align="middle" style="width: 100%">
          <div
            class="Statistics"
            style="
            box-sizing: border-box;
            margin-top: 10px;
            background: #e6f3fc;
            position: relative;
          "
          >
            <a-icon style="color: #108ee9" type="exclamation-circle" />
            <span style="margin: 0 10px">已选择{{ selectedRowKeys.length }}</span>
            <span style="margin: 0 10px">总计：{{ tableCount || 0 }}</span>
            <span style="margin: 0 10px">投入经费:{{ StatisticsArr.investmentOutlay }}</span>
            <span style="margin: 0 10px">产生效益:{{ StatisticsArr.productionBenefit }}</span>
          </div>
          <div>
            <div>
              <a-button :loading="loading" type="primary" size="small" style="margin-right: 10px;" @click.stop="getAll">
                汇总所有
              </a-button>
              <a-button :loading="loading" :disabled="selectedRowKeys.length < 1" type="primary" size="small" style="margin-right: 10px;" @click.stop="getSummary">
                汇总选中
              </a-button>
              <a class="btn_right">
                <span>{{ activeKey.length > 0 ? '收起' : '展开' }}统计排名信息</span>
                <a-icon :type="activeKey.length > 0 ? 'up' : 'down'" />
              </a>
            </div>
          </div>
        </a-row>
      </template>
      <div>
        <div class="about-master-container">
          <a-form-model ref="form">
            <a-row>
              <a-col span="8">
                <a-form-model-item label="新技术一级分类" class="requiredFormItem">
                  <a-select v-model="queryParam.treeId" placeholder="请选择">
                    <a-select-option v-for="(item, index) in treeSelect" :key="index" :value="item.id">
                      {{ item.name }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col span="8">
                <a-button type="primary" style="margin-left: 20px;" @click="search">
                  确定
                </a-button>
                <a-button type="primary" v-btnPermission="'stm_005_exp_09'" style="margin-left: 10px;" :loading="expLoading" @click="countDataExportExcelFn">
                  导出
                </a-button>
              </a-col>
            </a-row>
          </a-form-model>
        </div>
        <a-card>
          <b-table ref="tableSummary" :show-page="false" :columns="columnsTotalTemp" :request="loadDataSummary">
            <template slot="index" slot-scope="text, record, index">{{ index + 1 }}</template>
          </b-table>
        </a-card>
      </div>
    </a-collapse-panel>
  </a-collapse>
</template>

<script>
import { Collapse } from 'ant-design-vue'
import { getPlansCollect } from '@/api/science'
import { dataCountList } from '@/api/achievementsManage'
import { countData, getStatistics, treeList, countDataExportExcel } from '@/api/technology'

export default {
  name: 'AuditSummary',
  components: {
    ACollapse: Collapse,
    ACollapsePanel: Collapse['Panel']
  },
  props: {
    selectedRowKeys: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      tableCount: 0,
      StatisticsArr: {
        investmentOutlay: 0,
        productionBenefit: 0
      },
      loading: false,
      expLoading: false,
      activeKey: [],
      queryParam: {
        treeId: undefined
      },
      treeSelect: [],
      columnsTotalTemp: [
        {
          title: '排名',
          scopedSlots: { customRender: 'index' }
        },
        {
          title: '分公司名称',
          dataIndex: 'companyName'
        },
        {
          title: '大项应用数量',
          dataIndex: 'bigCount'
        },
        {
          title: '小项应用数量',
          dataIndex: 'smallCount'
        }
      ],
      loadDataSummary: async () => {
        if (!this.queryParam.treeId) {
          return { code: this.SUCCESS_CODE, data: [] }
        }
        return countData({ id: this.queryParam.treeId })
      }
    }
  },
  created() {
    this.getTree()
  },
  methods: {
    /**
     * 新技术应用情况导出
     * @param parameter
     */
    async countDataExportExcelFn() {
      if (!this.queryParam.treeId) {
        this.$message.warning('请选择新技术一级分类')
        return
      }
      this.expLoading = true
      setTimeout(() => {
        this.expLoading = false
      }, 3000)
      let res = await countDataExportExcel({ id: this.queryParam.treeId || '' })
      this.handleDownload(res)
    },
    /**
     * 转义下载
     * @param parameter
     */
    handleDownload(res) {
      const blob = new Blob([res.data])
      const filename = decodeURIComponent(res.headers['content-disposition'].split('filename=')[1])
      const downloadElement = document.createElement('a')
      const href = window.URL.createObjectURL(blob) // 创建下载的链接
      downloadElement.href = href
      downloadElement.download = filename.substring(filename.indexOf("''") + 2) // 获取文件名
      document.body.appendChild(downloadElement)
      downloadElement.click() //点击下载
      document.body.removeChild(downloadElement) //下载完成移除元素
      window.URL.revokeObjectURL(href) //释放blob对象
    },
    async getTree() {
      let res = await treeList()
      if (res.code === this.SUCCESS_CODE) {
        this.treeSelect = res.data[0].children
      }
    },
    search() {
      if (!this.queryParam.treeId) {
        this.$message.warning('请选择新技术一级分类')
        return
      }
      this.$refs.tableSummary.getData(null, true)
    },
    async getSummary() {
      this.changeId = []
      if (!this.selectedRowKeys) {
        this.$message.info('请在表格中选择索要汇总的信息')
        return
      }
      if (this.selectedRowKeys.length === 0) {
        this.StatisticsArr.investmentOutlay = undefined
        this.StatisticsArr.productionBenefit = undefined
      }
      this.changeId = this.selectedRowKeys.join(',')
      this.loading = true
      let res = await getStatistics({ id: this.changeId })
      this.loading = false
      if (res.code === 200) {
        this.tableCount = this.selectedRowKeys.length
        this.StatisticsArr = res.data
      }
    },
    async getAll() {
      this.loading = true
      let res = await getStatistics()
      this.loading = false
      if (res.code === 200) {
        this.tableCount = res.totalSize
        this.StatisticsArr = res.data
      }
    }
  }
}
</script>
